<template>
  <div>
    <div class="tops">
      <div class="button1">
        <span
          class="iconfont icon-arrowRight-copy-copy"
          @click="$router.push('/recommend')"
        ></span>
        <input type="text" placeholder="搜索书名、作者"
        @keyup.enter="getSeachFun"
        v-model="searchText"/>
        <span class="iconfont icon-chacha" v-show="type" @click="typeFun"></span>
      </div>
    </div>

    <div v-show="!type">
      <div class="searchhot">
        <span>大家都在搜</span>
      </div>

      <div class="hotlist">
        <ul>
          <li v-for="(item, index) in searchhot" :key="index" @click="add">
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div class="searchhot">
        <span>最近搜索</span>
        <span class="iconfont icon-lajitong"></span>
        <ul>
          <li v-for="(item,index) in dellist" :key="index">{{item.name}}</li>
        </ul>
      </div>
    </div>

    <div class="searchbox" v-show="type">
      <ul>
        <li v-for="(item,index) in searchlist" :key="index" @click="$router.push({path:'/bookxq',query:{id:item.id,cover:item.cover}})">
          <span class="iconfont icon-sousuo"></span>
          <span>{{item.text}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { searchHotWords } from "../api/res";
import {getSeach} from "../api/seacher";
export default {
  data() {
    return {
      type: false,
      searchhot: [],
      searchText:"",
      searchlist:[],
      dellist:[],//搜索历史
    };
  },
  methods:{
    getSeachFun(){
      getSeach({search:this.searchText}).then(data=>{
        // console.log(data.words.w);
        this.searchlist = data.words.w;
        this.dellist.push({id:this.id,name:this.searchText});
        this.searchText = "";
        this.type = !false
      })
    },
    typeFun(){
      this.type = false;
    },
    add(event){
      // console.log(111);
      this.searchText = event.target.innerText
    }
  },
  created() {
    searchHotWords().then((data) => {
      // console.log(data.list);
      this.searchhot = data.list;
    });
  },
  watch:{
    searchText(){
       if(this.searchText.length != 0){
         this.getSeachFun();
       }
     }
  }
};
</script>

<style lang="less">
.tops {
  .button1 {
    height: 50px;
    display: flex;
    input {
      width: 300px;
      height: 30px;
      border: none;
      background-color: #f5f5f5;
      border-radius: 20px;
      margin-left: 10px;
      margin-top: 10px;
      padding-left: 10px;
    }
    input::-webkit-input-placeholder {
      font-size: 15px;
      font-weight: normal;
      color: #aaaaaa;
      // padding-left: 20px;
      padding-bottom: 5px;
    }
    .icon-arrowRight-copy-copy {
      font-size: 23px;
      font-weight: bold;
      line-height: 45px;
      margin-left: 5px;
      margin-top: 2px;
    }
    .icon-chacha {
      font-size: 23px;
      font-weight: bold;
      margin-left: 7px;
      line-height: 52px;
    }
  }
}
.searchhot {
  height: 40px;
  background-color: #f5f5f5;
  position: relative;
  span {
    font-size: 15px;
    color: #807a73;
    float: left;
    margin-left: 20px;
    line-height: 40px;
  }
  .icon-lajitong {
    font-size: 17px;
    float: right;
    margin-right: 25px;
  }
  ul{
    margin-top: 45px;
    position: absolute;
    margin-left: 20px;
  //   display: flex;
    li{
      background: #fff;
      font-size: 14px;
      padding: 0 10px;
      line-height: 28px;
      height: 28px;
      margin-right: 15px;
      margin-bottom: 15px;
      display: inline-block;
      color: #aba59a;
      border: 1px solid #c8c8c8;
      border-radius: 4px;
    }
  }
}
.hotlist {
  // border: 1px solid black;
  margin-top: 15px;
  margin-left: 20px;
  ul {
    li {
      background: #fff;
      font-size: 14px;
      padding: 0 10px;
      line-height: 28px;
      height: 28px;
      margin-right: 15px;
      margin-bottom: 15px;
      display: inline-block;
      color: #aba59a;
      border: 1px solid #c8c8c8;
      border-radius: 4px;
    }
  }
}
.searchbox {
  // border: 1px solid black;
  ul {
    li {
      border-bottom: 1px solid #f5f5f5;
      line-height: 35px;
      margin-left: 20px;
      span {
        font-size: 15px;
        color: #777777;
      }
      span:last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>